<template>
  <div class="home">
    <van-notice-bar text="如有任何问题不要退款，请联系客服QQ：544251896"/>
    <div class="home_bg" v-if="bgshow"></div>
    <div v-else>
      <div class="apply">
        <span class="apply_text" v-show="tasktatus.task_status == 2" @click="oncancel">取消活动</span>
        <span class="apply_text" @click="onApply" v-show="tasktatus.task_status != 2">申请活动</span>
        <div class="blocked">
<!--          <div class="left_btn same btn" style="font-size:20px;" :class="{active:act == 1}" @click="clickBtn(1)">普通活动</div>-->
<!--          <div class="center_btn same btn" :class="{active:act == 3}" @click="clickBtn(3)">评价单</div>-->
<!--          <div class="right_btn same btn" :class="{active:act == 2}" @click="clickBtn(2)">浏览单</div>-->
        </div>
        <div class="bigcard">
          <div class="card">
            <div v-if="isshow">
              <span class="task">您当前的活动已被领完，下一波</span>
            </div>
            <span v-else class="task">当前的活动数量为<span class="special">{{redisnum}}</span>个,下一波</span>
            <span class="task">活动来临时间为 <span class="special">{{timer}}</span></span>
            <span class="task">活动数量为<span class="special">{{count}}</span>个，请提前做好准备哦~</span>
          </div>
<!--          <div class="visit">邀请徒弟申请活动吧~</div>-->
        </div>
      </div>
      <van-popup v-model="showwait" round>
        <div class="popupbox">
          <p class="waittext">正在排队申请活动中...</p>
          <img src="../assets/img/wait.jpg" alt="">
          <div class="btnlist">
            <p class="cancel" @click="oncancel">取消排队</p>
            <p class="cancel" style="background:red;" @click="showwait = false">后台排队</p>
          </div>
        </div>
      </van-popup>

      <van-popup v-model="showready" round :close-on-click-overlay="false">
        <div class="popupbox">
          <p class="icon">
            <van-icon name="checked"/>
          </p>
          <p class="isok">您已申请到活动，请领取活动前往活动进度！</p>
          <p class="cancel" @click="ondraw">领取活动</p>
        </div>
      </van-popup>
      <van-popup v-model="showshadow_" round :close-on-click-overlay="false">
        <div class="shadow_">
          <div class="startBtn_yes" @click="queren_()">确认</div>
        </div>
      </van-popup>

      <van-popup v-model="showshadow" round :close-on-click-overlay="false">
        <div class="shadow">
          <div class="startBtn_yes" @click="queren()">确认</div>
        </div>
      </van-popup>
      <return></return>
      <AgainReturn></AgainReturn>
      <Footer></Footer>
    </div>
  </div>
</template>

<script>
  import {submessage, getuserstatus, cancelqueue, prompttask, getuserinfo,reminder_submit,reminder_no} from '../api/api';
  import Footer from '../components/footer.vue'
  import aestool from '@/utils/aestool.js';
  import Return from "./Return";
  import AgainReturn from "./AgainReturn";
  export default {
    components: {AgainReturn, Return, Footer},
    data() {
      return {
        act: 1,
        showwait: false,
        showshadow_:false,
        showready: false,
        dialog:'',
        showshadow:false,
        dialogVisible:false,
        tasktatus: '',
        timer: '',
        count: '',
        isshow: false,
        redisnum: '',
        userinfodata: {},
        bgshow: false,
        evareview_info:[]
      }
    },
    created(){
      this.getUserData()
      this.getStatus()
      this.gettasknum()
    },
    mounted(){
      if(this.$route.query.token != undefined){
        window.sessionStorage.setItem('token',this.$route.query.token)
      }
    },
    methods: {
      queren(){
         this.$router.push({
            path:"/evaluate",
            query:{
              baby_id:this.evareview_info.baby_id,
              id:this.evareview_info.task_id
            }
         })
      },
      wei_go(id){
        let params = {
          reminder_id:id
        }
        reminder_no(params).then((res)=>{
          if(res.Status == 200){
            this.$toast(res.Message)
            setTimeout(()=>{
              this.getStatus()
            },2000)
          }else{
            this.$toast(res.Message)
          }
        })
      },
      queren_(){
        this.$router.push('/collection')
      },
      //获取用户信息
      getUserData(){
        getuserinfo().then(res =>{
          if (res.data.Status == 200) {
            sessionStorage.setItem('useinfo', aestool.decrypt(res.data.Data, '123456asdzxcqwe0'))
            this.userinfodata = JSON.parse(aestool.decrypt(res.data.Data, '123456asdzxcqwe0'))
            console.log(this.userinfodata);
          }
        })
      },
      gettasknum() {
        let typetext = '';
        if (this.act == 1) {
          typetext = 'pt';
        } else if (this.act == 2) {
          typetext = 'll';
        } else {
          typetext = 'pj';
        }
        let params = {
          promptinfo: aestool.encrypt(typetext, '123456asdzxcqwe0')
        }
        prompttask(params).then(res => {
          // console.log('获取活动数量', res)
          if (res.Status == 200) {
            this.timer = this.timestampToTime(res.Data.xyb_time)
            this.count = res.Data.count
            this.redisnum = res.Data.redis_num
            if (res.Data.redis_num > 0) {
              this.redis_num = true
            } else {
              this.redis_num = false
            }
          }
        })
      },
      timestampToTime(timestamp) {
        var date = new Date(timestamp * 1000);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
        var Y = date.getFullYear() + '-';
        var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
        var D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' ';
        var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
        var m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
        var s = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());
        return Y + M + D + h + m + s;
      },
      //获取活动状态
      getStatus(){
        let toastload = this.$toast.loading({
          message: '加载中...',
          forbidClick: true
        });
        getuserstatus().then(res => {
          toastload.clear()
          if (res.data.Status == 200) {
            this.tasktatus = JSON.parse(aestool.decrypt(res.data.Data, '123456asdzxcqwe0'))
            this.evareview_info = this.tasktatus.evareview_info
            if(this.tasktatus.evareview_status != 0){
                this.showshadow = true
            }
            if(this.tasktatus.reminder_status == 1){
              this.showshadow_ = true
            }else{
              this.showshadow_ = false
            }
            if (this.tasktatus.task_status == 1) {
              this.showwait = false
              this.showready = false
            } else if (this.tasktatus.task_status == 2) {
              this.showwait = true
              this.showready = false
            } else if (this.tasktatus.task_status == 3) {
              this.showwait = false
              this.showready = true
            }
          }
        })
      },
      //领取活动
      ondraw() {
         this.$router.push('/Task-attention')
      },
      getNum() {
        var chars = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z'];
        var nums = ""
        for (var i = 0; i < 16; i++) {
          var id = parseInt(Math.random() * 61);
          nums += chars[id];
        }
        return nums
      },
      clickBtn(idx) {
        this.act = idx
        this.gettasknum()
      },
      //申请活动
      onApply() {
        if (this.userinfodata.user_status == 1) {
          this.$toast('请完善信息后再申请活动！')
          setTimeout(() => {
            this.$router.push('/uploadImg')
          }, 1500);
        } else if (this.userinfodata.user_status == 3) {
          this.$toast('当前用户已被冻结，请联系客服进行处理！')
        } else if (this.userinfodata.user_status == 4) {
          this.$toast('当前用户资料正在审核中...')
        } else if (this.tasktatus.task_status == 3 || this.tasktatus.task_status == 4) {
          this.$toast('当前有活动进行中，请完成活动后再申请活动！')
        } else {
          let toastload = this.$toast.loading({
            message: '加载中...',
            forbidClick: true
          });
          let typetext = '';
          if (this.act == 1) {
            typetext = 'pt';
          } else if (this.act == 2) {
            typetext = 'll';
          } else {
            typetext = 'pj';
          }
          let params = {
            task_info: aestool.encrypt(typetext, 'cpf814322587qwer')
          }
          submessage(params).then(res => {
            toastload.clear()
            if (res.Status == 200) {
              this.tasktatus.task_status = 2
              this.showwait = true
            } else if (res.Status == 430) {
              this.$toast('请完善信息后再申请活动！')
              setTimeout(() => {
                this.$router.push('/uploadImg')
              }, 1500);
            }else if (res.Status ==400&&res.Code ==265){
              this.tasktatus.task_status = 2
              this.showwait = true
            }else  {
              this.$toast(res.Message)
            }
          })
        }
      },
      //取消活动
      oncancel() {
        let toastload = this.$toast.loading({
          message: '加载中...',
          forbidClick: true
        });
        let str = this.getNum()
        let params = {
          queuedata: aestool.encrypt('Cancelqueue_1', str),
          queuedata_s: aestool.encrypt(str, '123456asdzxcqwe0'),
        }
        cancelqueue(params).then(res => {
          toastload.clear()
          // if (res.Status == 200) {
          //   this.showwait = false
          //   this.$toast('取消活动成功！')
          //   this.tasktatus.task_status = 1
          // } else {
          //   this.$toast(res.Message)
          // }
          this.showwait = false
          this.$toast('取消活动成功！')
          this.tasktatus.task_status = 1
        })
      }
    }
  }
</script>

<style lang="stylus" scoped>
  .home {
    height 100%
    font-size 12px
    .home_bg {
      height 100%
      background url("../assets/img/404.png") no-repeat top center
      background-size cover
    }
    .popupbox {
      padding 20px 50px
      img {
        width 160px
        height 160px
      }
      .icon {
        text-align center
        font-size 60px
        color #07c160
      }
      .isok {
        width 160px
        font-size 14px
        padding 0 0 10px
      }
      .waittext {
        line-height 40px
        text-align center
        font-size 16px
      }
      .btnlist {
        display flex
        justify-content space-between
        align-items center
      }
      .cancel {
        background #64c5ff
        color #ffffff
        border-radius 20px
        line-height 30px
        margin 10px 0
        text-align center
        padding 0 12px
      }
    }
    .apply {
      background url(../assets/img/z_bg.jpg) top center no-repeat
      background-size 70%
      text-align center
      padding-top 48%
    }
    .apply_text {
      color #fff
      border 1px solid #fff
      border-radius 30px
      padding 6px 18px
      font-size 16px
      box-shadow 0px 1px 6px 0px #11a3fb
    }
    .shadow{
      width 300px
      height 380px
      background url(../../static/img/QQ.png) no-repeat top center
      background-size cover
    }
    .shadow_{
      position relative
      width 300px
      height 380px
      background url(../../static/img/QQ_.png) no-repeat top center
      background-size cover
    }
    .startBtn_yes{
      height 40px
      background-image linear-gradient(to right, #3b5bea , #5786ff)
      text-align center
      line-height 40px
      color #ffffff
      font-size 16px
      position absolute
      bottom 20px
      margin:0 25px
      width 250px
      border-radius 20px
    }
    .startBtn_no{
      height 40px
      background-image linear-gradient(to right, #3b5bea , #5786ff)
      text-align center
      line-height 40px
      color #ffffff
      font-size 16px
      position absolute
      bottom 20px
      margin:0 165px
      width 100px
      border-radius 20px
    }
    .blocked {
      margin-top 16%
      display flex
      justify-content center
      align-items center
    }

    .btn {
      line-height 40px
      padding 0 30px
      box-shadow 0px 1px 6px 0px #eaeaea
    }

    .same {
      background #fff
      color #8c8c8c
    }

    .left_btn {
      width 70%
      border-radius 20px
    }

    .center_btn {
      background #fff
      /*color #fdee45*/
    }

    .right_btn {
      border-top-right-radius 40px
      border-bottom-right-radius 40px
    }

    .active {
      background-color #eaeaea
    }

    .bigcard {
      box-shadow 0px 1px 6px 0px #eaeaea
      margin 6% 6% 0
    }

    .card {
      background url(../../static/img/card.png) no-repeat top center
      background-size cover
      text-align left
      padding 20px 12px 60px
      color #fff
      border-top-left-radius 10px
      border-top-right-radius 10px
    }

    .task {
      display block
      line-height 30px
    }

    .special {
      font-size 18px
      padding 0 6px
      color #fdee45
    }

    .visit {
      padding 10px 12px
      border-bottom-left-radius 10px
      border-bottom-right-radius 10px
      text-align left
      color #6b7786
    }
  }
</style>
